import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Table, Button, Badge, Modal, List, Card } from 'antd';
import styles from './SimCard.less';
import VehSearchForm from '../../components/VehSearchForm/index';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { getSimExportUrl, getVehExportUrl } from '../../services/api';
import StandardTable from 'components/StandardTable';
import moment from 'moment';

@connect(({ dev,vehicle }) => ({
    dev,vehicle
}))
export default class VehPeriod extends PureComponent {
    constructor(props) {
        super(props);
        this.columns = [
            {
                title: '运营日期',
                dataIndex: 'optDate',
                key: 'optDate',
            },
            {
                title: '设备UUID',
                dataIndex: 'devUuid',
                key: 'devUuid',
            },
            {
                title: '安装时间',
                dataIndex: 'devFixTime',
                key: 'devFixTime',
            },
            {
                title: '卸载时间',
                dataIndex: 'devUnLoadTime',
                key: 'devUnLoadTime',
            },
            {
                title: '运营车辆',
                dataIndex: 'vehLicplate',
                key: 'vehLicplate',

            },
            {
                title: '运营时长',
                dataIndex: 'optTimeLen',
                key: 'optTimeLen',

            },
            {
                title: '所属车队',
                dataIndex: 'vehGroup',
                key: 'vehGroup',

            },
            {
                title: '所属公司',
                dataIndex: 'vehCompany',
                key: 'vehCompany',

            },
            {
                title: '主班司机',
                dataIndex: 'mainDriver',
                key: 'mainDriver',

            },
            {
                title: '主班司机电话',
                dataIndex: 'mdTelephone',
                key: 'mdTelephone',

            },
            {
                title: '副班司机',
                dataIndex: 'viceDriver',
                key: 'viceDriver',

            },
            {
                title: '副班司机电话',
                dataIndex: 'vdTelephone',
                key: 'vdTelephone',

            },
        ];
        this.state = {
            formValues: {}
        };
    }

    componentDidMount() {
        const { dispatch } = this.props;
        const startSubDate = moment().subtract(8, 'days').format("YYYY-MM-DD");
        const endSubDate = moment().subtract(1, 'days').format("YYYY-MM-DD");
        dispatch({
            type: 'vehicle/fetchVehInfo',
            payload: {  current: 1,
                pageSize: 10,startSubDate,endSubDate}
        });
        dispatch({
            type: 'dev/fetchCityCodes',
          });
    }

    onChange = (pagination, filtersArg, sorter) => {
        const { dispatch } = this.props;
        const { formValues } = this.state;
        const params = {
            page: pagination.current,
            pageSize: pagination.pageSize,
            ...formValues,
        };
        dispatch({
            type: 'vehicle/fetchVehInfo',
            payload: params
        });
    };

    handleSearch = (params) => {
        const { dispatch, vehicle: { pagination } } = this.props;
        this.setState({ formValues: params });
        dispatch({
            type: 'vehicle/fetchVehInfo',
            payload: { page: 1, pageSize: pagination.pageSize, ...params },
        });
    };



    onExport = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'vehicle/onExport',
            payload: { ...this.state.formValues },
            callback: src => {
                const link = document.createElement('a');
                link.download = 'filename';
                link.style.display = 'none';
                link.href = src;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            },
        });
    }
    render() {
        const { pagination, total, isLoading, hasMore, list } = this.props.vehicle;
        //console.log('list', list)
        //const { showModal, iccid, devId, startTime, endTime, online, status } = this.state;
        return (
            <PageHeaderLayout>
                <Card>
                    <Fragment>
                        <div className={styles.headRow}>
                            <VehSearchForm onSearch={this.handleSearch} city={this.props.dev.cityCodes} />
                            <div className={styles.headRight}>
                                <Button onClick={this.onExport}>
                                    
                                        导出
                  
                                </Button>
                                <Button
                                    onClick={() => {
                                        window.location.reload();
                                    }}
                                >
                                    刷新
                </Button>
                            </div>
                        </div>
                        <Table
                            columns={this.columns}
                            dataSource={list}
                            onChange={this.onChange}
                            loading={isLoading}
                            pagination={
                                pagination
                              }
                        />

                    </Fragment>
                </Card>
            </PageHeaderLayout>
        );
    }
}
